<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/head.css" />
    <link rel="stylesheet" type="text/css" href="../style/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../style/animate.min.css" />
    <style>
        main {
            padding-top: 75px;
        }

        #pullrefresh {
            padding-top: 75px;
        }

        .questions {
            width: 95%;
            margin: 0.5rem auto;
        }

        .questions .question {
            margin: 0.5rem 0;
            padding: 0.5rem;
            background-color: #fff;
            border-radius: 0.4rem;
        }

        .question_t {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px dashed #ccc;
            padding: 0.5rem 0;
        }

        .question_t span {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
        }

        .question_t span img {
            width: 100%;
            height: 100%;
        }

        .question_t div {
            margin-left: 2rem;
        }

        .question_t div p:nth-child(1) {
            color: #3949AB;
            margin-bottom: 0.3rem;
        }

        .question_t div p:nth-child(2) {
            color: #B6B6B6;
        }

        .question_m {
            padding: 0.5rem 0;
            border-bottom: 1px dashed #ccc;
        }

        .question_m p {
            color: #54505C;
            line-height: 1.5;
            margin-bottom: 0;
        }

        .question_b {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0.5rem 0;
            font-size: 0.8rem;
            color: #777;
        }

        .question_b img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.2rem;
            vertical-align: middle;
        }

        p {
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <header>答疑</header>
    <main>
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="questions">

                </div>
            </div>
        </div>
    </main>
</body>
<script type="text/template" id="question">
    {{~it.items:value:index}}
    <div class="question animated lightSpeedIn">
        <div class="question_t">
            <span>
              <img src="../img/icons/user.png" alt="">
          </span>
            <div>
                <p>{{=value.question_uname}}</p>
                <p>{{=value.question_time}}</p>
            </div>
        </div>
        <div class="question_m">
            <p>{{=value.question_title}}</p>
        </div>
        <div class="question_b">
            {{? value.question_iscollect == '0'}}
            <span id='collect' data-id="{{=value.id}}"><img src="../img/icons/collect.png" alt=""><span>收藏</span></span>
            {{?? value.question_iscollect == '1'}}
            <span id='collect' data-id="{{=value.id}}"><img src="../img/icons/collected.png" alt=""><span>已收藏</span></span>
            {{?}}
            <span id='complain'><img src="../img/icons/complain.png" alt="">吐槽</span>
            <span id='see' data-id="{{=value.id}}"><img src="../img/icons/see.png" alt="">查看</span>
            <span id='answer'><img src="../img/icons/answer.png" alt="">回答</span>
        </div>
    </div>
    {{~}}
</script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/rend.js"></script>
<script type="text/javascript">
    apiready = function() {
        pullupRefresh();
    };

    mui("#pullrefresh").pullRefresh({
        down: {
            callback: pulldownRefresh
        },
        up: {
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        },
    })

    function pulldownRefresh() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
        }, 1500);
    }

    var count = 0;
    var pagesize = 4;

    function pullupRefresh() {
        var url = 'http://114.116.243.15/newbtb/appinfo/queryQuestion.lecture';
        api.ajax({
            url: url,
            method: 'post',
            data: {
                body: {}
            }
        }, function(ret, err) {
            if (ret) {
                count++;
                var newarray = [];
                var data = ret.btb_data.records;
                var questions = $('.questions');
                if ((count - 1) * pagesize > data.length) {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    return
                }
                for (var i = (count - 1) * pagesize; i < count * pagesize; i++) {
                    if (!data[i]) {
                        break;
                    } else {
                        newarray.push(data[i]);
                    }
                }
                $('.questions').append(btbRender('question', newarray));
                $('.question').on("tap","#collect",function() {
                  if($api.getStorage('username')) {
                      const _this = this;
                      if($(this).find('img').attr('src') == '../img/icons/collect.png') {
                          api.ajax({
                              url: 'http://114.116.243.15/newbtb/appinfo/collect.lecture',
                              method: 'post',
                              data: {
                                  body: {
                                    'tbname': 'lecture_question',
                                    'id': $(_this).attr('data-id'),
                                    'question_iscollect': 1
                                  }
                              }
                          },function(ret, err){
                              if (ret) {
                                if(ret.status == 1) {
                                    $(_this).find('img').attr('src','../img/icons/collected.png');
                                    $(_this).find('span').text('已收藏');
                                    api.toast({
                                        msg: '收藏成功',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                }
                              }
                          });
                      } else {
                        api.ajax({
                            url: 'http://114.116.243.15/newbtb/appinfo/cancelcollect.lecture',
                            method: 'post',
                            data: {
                              body: {
                                'tbname': 'lecture_question',
                                'id': $(_this).attr('data-id'),
                                'question_iscollect': 0
                              }
                            }
                        },function(ret, err){
                            if (ret) {
                                if(ret.status == 1) {
                                    $(_this).find('img').attr('src','../img/icons/collect.png');
                                    $(_this).find('span').text('收藏');
                                    api.toast({
                                        msg: '取消收藏',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                }
                            }
                        });
                      }
                  }
                  else {
                    api.openWin({
                        name: 'login',
                        url: './btb-login.html',
                    });
                  }
                });
                $('.question').on("tap","#complain",function() {
                    if($api.getStorage('username')) {
                      var dialogBox = api.require('dialogBox');
                      dialogBox.input({
                          keyboardType: 'default',
                          texts: {
                              title: '吐槽',
                              placeholder: '对该问题有任何看法都可以告诉我们',
                              leftBtnTitle: '取消',
                              rightBtnTitle: '确定'
                          },
                          styles: {
                              bg: '#fff',
                              corner: 2,
                              w: 300,
                              h: 240,
                              title: {
                                  h: 60,
                                  alignment: 'center',
                                  size: 14,
                                  color: '#000',
                                  marginT: 30,
                              },
                              input: {
                                  h: 60,
                                  y: 30,
                                  marginT: 15,
                                  marginLeft: 10,
                                  marginRight: 10,
                                  textSize: 14,
                                  textColor: '#000',
                                  corner: 5,
                              },
                              dividingLine: {
                                  width: 0.5,
                                  color: '#696969'
                              },
                              left: {
                                  bg: 'rgba(0,0,0,0)',
                                  color: '#3949AB',
                                  size: 12,
                                  h: 40,
                                  w: 60,
                                  marginB: 10,
                                  corner: 5,
                                  widhtBorder: 1,
                                  normalBorderColor: '#778899',
                                  activeBorderColor: '#0000CD',
                                  activeColor: '#006400',
                                  activeBg: '#6B8E23'
                              },
                              right: {
                                  bg: 'rgba(0,0,0,0)',
                                  color: '#3949AB',
                                  size: 12,
                                  h: 40,
                                  w: 60,
                                  marginB: 10,
                                  corner: 5,
                                  widhtBorder: 1,
                                  normalBorderColor: '#778899',
                                  activeBorderColor: '#0000CD',
                                  activeColor: '#006400',
                                  activeBg: '#6B8E23'
                              }
                          }
                      }, function(ret) {
                          if (ret.eventType == 'left') {
                              var dialogBox = api.require('dialogBox');
                              dialogBox.close({
                                  dialogName: 'input'
                              });
                          }
                          else {
                              if(!ret.text || $.trim(ret.text).length == 0) {
                                  api.toast({
                                      msg: '未输入',
                                      duration: 2000,
                                      location: 'bottom'
                                  });
                                  return
                              } else {
                                  api.toast({
                                      msg: '感谢您的参与',
                                      duration: 2000,
                                      location: 'bottom'
                                  });
                                  var dialogBox = api.require('dialogBox');
                                  dialogBox.close();
                              }
                          }
                      });
                    }
                    else {
                      api.openWin({
                          name: 'login',
                          url: './btb-login.html',
                      });
                    }
                })
                $(".question").on("tap","#answer",function () {
                    if($api.getStorage('username')) {
                      var dialogBox = api.require('dialogBox');
                      dialogBox.input({
                          keyboardType: 'default',
                          texts: {
                              title: '解答',
                              placeholder: '输入你的答案',
                              leftBtnTitle: '取消',
                              rightBtnTitle: '确定'
                          },
                          styles: {
                              bg: '#fff',
                              corner: 2,
                              w: 300,
                              h: 240,
                              title: {
                                  h: 60,
                                  alignment: 'center',
                                  size: 14,
                                  color: '#000',
                                  marginT: 30,
                              },
                              input: {
                                  h: 60,
                                  y: 30,
                                  marginT: 15,
                                  marginLeft: 10,
                                  marginRight: 10,
                                  textSize: 14,
                                  textColor: '#000',
                                  corner: 5,
                              },
                              dividingLine: {
                                  width: 0.5,
                                  color: '#696969'
                              },
                              left: {
                                  bg: 'rgba(0,0,0,0)',
                                  color: '#3949AB',
                                  size: 12,
                                  h: 40,
                                  w: 60,
                                  marginB: 10,
                                  corner: 5,
                                  widhtBorder: 1,
                                  normalBorderColor: '#778899',
                                  activeBorderColor: '#0000CD',
                                  activeColor: '#006400',
                                  activeBg: '#6B8E23'
                              },
                              right: {
                                  bg: 'rgba(0,0,0,0)',
                                  color: '#3949AB',
                                  size: 12,
                                  h: 40,
                                  w: 60,
                                  marginB: 10,
                                  corner: 5,
                                  widhtBorder: 1,
                                  normalBorderColor: '#778899',
                                  activeBorderColor: '#0000CD',
                                  activeColor: '#006400',
                                  activeBg: '#6B8E23'
                              }
                          }
                      }, function(ret) {
                          if (ret.eventType == 'left') {
                              var dialogBox = api.require('dialogBox');
                              dialogBox.close({
                                  dialogName: 'input'
                              });
                          }
                          else {
                              if(!ret.text || $.trim(ret.text).length == 0) {
                                  api.toast({
                                      msg: '未输入',
                                      duration: 2000,
                                      location: 'bottom'
                                  });
                                  return
                              } else {
                                  api.toast({
                                      msg: '解答成功',
                                      duration: 2000,
                                      location: 'bottom'
                                  });
                                  var dialogBox = api.require('dialogBox');
                                  dialogBox.close();
                              }
                          }
                      });
                    }
                    else {
                      api.openWin({
                          name: 'login',
                          url: './btb-login.html',
                      });
                    }
                })
                $(".question").on("tap","#see",function () {
                    api.openWin({
                        name: 'answerDetail',
                        url: './btb-answerDetail.html',
                        pageParam: {
                            id: $(this).attr('data-id')
                        }
                    });

                })
                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            }
        });
    }



</script>

</html>
